import React, { Component } from 'react';
import {StyleSheet,Text,View} from 'react-native';
import { Pullrefresh} from 'iftide';
const LoadStates= {
    Finish: 1,
    Loading: 2,
    NoMoreData: 3,
    LoadFailure: 4
  };
const RefreshStates = {
    Normal: 0,
    Refreshing: 1,
    RefreshSucess: 2,
    RefreshFailure: 3,
    NoRefreshing: 4,
    NoInternet: 5
}
export default class Basic extends Component{
    constructor(props) {
        super(props);
        this.state = {
            data : this._getData(),
            loadState: LoadStates.Finish,
            refreshState: RefreshStates.Normal,
        };
    }

    _getData = () => {
        let data = [
            {name:'中部战略新兴经济第12323号',value1:'5%',time:'2018-09-22',value2:'285,288.00'},
            {name:'南部战略新兴经济第323号',value1:'15%',time:'2018-11-22',value2:'5,288.00'},
            {name:'西部战略新兴经济第412号',value1:'50%',time:'2018-09-22',value2:'4,288.00'},
            {name:'中部战略新兴经济第12323号',value1:'5%',time:'2018-09-22',value2:'285,288.00'},
            {name:'南部战略新兴经济第323号',value1:'15%',time:'2018-11-22',value2:'5,288.00'},
            {name:'西部战略新兴经济第412号',value1:'50%',time:'2018-09-22',value2:'4,288.00'},
            {name:'中部战略新兴经济第12323号',value1:'5%',time:'2018-09-22',value2:'285,288.00'},
            {name:'南部战略新兴经济第323号',value1:'15%',time:'2018-11-22',value2:'5,288.00'},
            {name:'西部战略新兴经济第412号',value1:'50%',time:'2018-09-22',value2:'4,288.00'}
        ]
        return data;
    }

    _renderItem = (item) => {
        return (
            <View style={{flexDirection:'column'}}>
                <View style={styles.firstView}>
                    <Text style={{fontSize:16}}>{item.item.name}</Text>
                    <Text style={{fontSize:13,paddingLeft:5,paddingRight:5,borderRadius:3,color:'blue',backgroundColor:'grey'}}>可拆分</Text>
                </View>
                <View style={styles.secondView}>
                    <View style={{flexDirection:'column',width:120}}>
                        <Text style={{fontSize:18,marginVertical:10,textAlign:'center'}}>{item.item.value1}</Text>
                        <Text style={{fontSize:14,marginVertical:10,textAlign:'center',color:'#666'}}>折合年化收益率</Text>
                    </View>
                    <View style={{flexDirection:'column',paddingHorizontal:10,borderRightWidth:1,borderLeftWidth:1,borderColor:'#d8d8d8'}}>
                        <Text style={{fontSize:15,marginVertical:10,textAlign:'center'}}>{item.item.time}</Text>
                        <Text style={{fontSize:14,marginVertical:10,textAlign:'center',color:'#666'}}>关闭/可赎回日</Text>
                    </View>
                    <View style={{flexDirection:'column',paddingHorizontal:10,alignItems:'center'}}>
                        <Text style={{fontSize:15,marginVertical:10,textAlign:'center'}}>{item.item.value2}</Text>
                        <View style={{borderColor:'#666',borderRadius:6,borderWidth:1,width:80,height:40}}>
                            <Text style={{padding:10,textAlign:'center'}}>购买</Text>                           
                        </View>
                    </View>
                </View>
            </View>
        );
    }

    componentWillUnmount(){
        clearTimeout(this.timer1);
        clearTimeout(this.timer2);
    }

    _onLoadMore = () => {
        //执行前将load状态置为加载中
        this.setState({loadState:LoadStates.Loading});       
        
        this.timer1 = setTimeout(()=>{
            let dataExtra = [
                {name:'上拉加载的新数据',value1:'5%',time:'2018-09-22',value2:'285,288.00'}
            ];
            let data = this.state.data.concat(dataExtra);
            //模拟正常加载数据,加载完成后将LoadStates置为Finish
            this.setState({loadState:LoadStates.Finish,data:data});
            //模拟加载后无更多数据
            //this.setState({loadState:LoadStates.NoMoreData});
            //模拟加载数据失败
            //this.setState({loadState:LoadStates.LoadFailure});
            
        },2000);
    }

    _onRefresh = () => {
        //执行下拉刷新前将refeshing置为true
        this.setState({refreshState:RefreshStates.Refreshing})
        this.timer2=setTimeout(()=>{
            let tmpData = [
                {name:'刷新后的新数据',value1:'5%',time:'2018-09-22',value2:'285,288.00'}
            ];
            let data = tmpData.concat(this.state.data);
            //模拟数据加载成功
            this.setState({data:data,refreshState:RefreshStates.RefreshSucess});
            //模拟数据加载失败
            //this.setState({refreshState:RefreshStates.RefreshFailure});
            //模拟数据加载失败
            //this.setState({refreshState:RefreshStates.NoRefreshing});
        },3000);
        
    }

    render(){
        let footer = (
            <View style={{paddingLeft:20,backgroundColor:'grey',height:40,justifyContent:'center'}}>
                <Text>这是自定义底部内容</Text>
            </View>
        );
        let header = (
            <View style={{paddingLeft:20,backgroundColor:'grey',height:40,justifyContent:'center'}}>
                <Text>这是自定义头部内容</Text>
            </View>
        );

        let separatorLine = (
            <View style={{height:1,backgroundColor:'#d8d8d8'}}/>
        );
        return(
            <View style={{flex:1,marginTop:10}}>
                <Text>Pullrefresh--拉动刷新组件</Text>
                <Text>下拉可以刷新数据</Text>
                <Text>上拉可以加载数据</Text>
                <Pullrefresh
                    data={this.state.data}
                    renderItem={this._renderItem}
                    separatorLine={separatorLine}
                    viewHeight={500}
                    header={header}
                    footer={footer}
                    onLoadMore={this._onLoadMore}
                    onRefresh={this._onRefresh}
                    loadState={this.state.loadState}
                    refreshState={this.state.refreshState}
                />          
            </View>
        );
    }
}
const styles = StyleSheet.create({
    firstView : {
        flexDirection:'row',
        justifyContent:'space-between',
        marginTop:10,
        paddingHorizontal:10,
    },
    secondView : {
        flexDirection:'row',
        justifyContent:'flex-start',
        marginVertical:10,
        marginHorizontal:10
    }
});